<template>
  <div class="basic-container">
    <InfoCard title="回款进度" :list="paymentProgress" />
    <TableInfoCard title="回款详情" :table-data="paymentInfo" :table-list="tableList" />
    <!-- <TableInfoCard title="核账记录（暂不提测）" :table-data="checkInfo" :table-list="tableListForCheck" /> -->
  </div>
</template>

<script>
import InfoCard from './InfoCard'
import TableInfoCard from './TableInfoCard'
import { formatTime, getDictionaryLabel, formatMoneyAmount } from '@/utils/tools'
import { mapState } from 'vuex'

export default {
  name: 'RepaymentPlan',
  components: {
    InfoCard,
    TableInfoCard
  },
  props: {
    data: {
      type: Object,
      required: true,
      default() {
        return {}
      }
    },
    moneyBackOptions: {
      type: Array,
      required: true,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      gutter: 12,
      style: {
        marginTop: '22px'
      },
      paymentProgress: [
        { label: '整体回款状态', value: '' },
        { label: '应收金额', value: '' },
        { label: '实收金额', value: '' },
        { label: '待收金额', value: '' }
      ],
      paymentInfo: [],
      checkInfo: [],
      loading: false,
      tableList: [
        {
          label: '回款单号',
          prop: 'paymentPlanOrderNo'
        },
        {
          label: '回款阶段',
          prop: 'paymentStage',
          render: (h, data) => {
            const { row, column: { prop }} = data
            const text = this.getPaymentStageText(row[prop])
            return <span>{ text }</span>
          }
        },
        {
          label: '回款状态',
          prop: 'checkingStatus',
          render: (h, data) => {
            const { row, column: { prop }} = data
            const item = this.checking_status.find(it => +it.value === +row[prop]) || {}
            return <span>{item.label}</span>
          }
        },
        {
          label: '回款截至日期',
          prop: 'paymentDeadline',
          render: function(node, data) {
            const { row, column: { prop }} = data
            const text = formatTime(row[prop], 'YYYY-MM-DD')
            return <span>{{ text }}</span>
          }
        },
        {
          label: '应收金额',
          prop: 'paymentAmount',
          render: (h, data) => {
            const { row, column: { prop }} = data
            const text = `${row.currencyCode} ${formatMoneyAmount(row[prop])}`
            return <span>{text}</span>
          }
        },
        {
          label: '已核账金额',
          prop: 'paymentAmountCheck',
          render: (h, data) => {
            const { row, column: { prop }} = data
            const text = `${row.currencyCode} ${formatMoneyAmount(row[prop])}`
            return <span>{text}</span>
          }
        },
        {
          label: '币种',
          prop: 'currencyCode',
          render: (h, data) => {
            const { row, column: { prop }} = data
            const text = getDictionaryLabel(row[prop], this.currency)
            return <span>{ text }</span>
          }
        },
        {
          label: '核账时间',
          prop: 'auditTime',
          render: function(node, data) {
            const { row, column: { prop }} = data
            const text = formatTime(row[prop])
            return <span>{{ text }}</span>
          }
        },
        {
          label: '备注',
          prop: 'remark'
        }
      ],
      tableListForCheck: [
        {
          label: '时间',
          prop: 'transactionDate',
          render: function(node, data) {
            const { row, column: { prop }} = data
            const text = formatTime(row[prop])
            return <span>{{ text }}</span>
          }
        },
        {
          label: '回款单号',
          prop: 'paymentPlanOrderNo'
        },
        {
          label: '主体账号',
          prop: 'receivingBankAccount'
        },
        {
          label: '类型',
          prop: 'sku3'
        },
        {
          label: '原余额',
          prop: 'sku4'
        },
        {
          label: '名目',
          prop: 'sku5'
        },
        {
          label: '本次变更金额',
          prop: 'sku6'
        },
        {
          label: '变更后余额',
          prop: 'sku7'
        },
        {
          label: '备注',
          prop: 'summary'
        }
      ]
    }
  },
  computed: {
    ...mapState({
      currency: state => state.base.currency,
      payment_stage: state => state.base.payment_stage,
      checking_status: state => state.base.checking_status
    })
  },
  watch: {
    data: {
      handler() {
        this.initDetailPaymentInfo()
      },
      deep: true
    }
  },
  methods: {
    initDetailPaymentInfo() {
      this.initPaymentProgress()
      this.initPaymentInfo()
      this.initCheckInfo()
    },
    initPaymentProgress() {
      const { paymentProgressResDTO } = this.data
      const { paymentStatus, totalFund, actualAllAmount, dueAllAmount, currencyCode } = paymentProgressResDTO || {}
      const arr = [
        this.getStatusLabel(paymentStatus, 'moneyBackOptions'),
        this.showCurrencyNum(totalFund, currencyCode),
        this.showCurrencyNum(actualAllAmount, currencyCode),
        this.showCurrencyNum(dueAllAmount, currencyCode)
      ]
      arr.forEach((item, index) => {
        this.paymentProgress[index].value = item
      })
    },
    initPaymentInfo() {
      const { paymentPlanOrderDetailList } = this.data
      this.paymentInfo = paymentPlanOrderDetailList || []
    },
    getStatusLabel(status, optionName) {
      const item = this[optionName].filter(item => `${item.value}` === `${status}`)[0]
      return item ? item.label : '-'
    },
    showCurrencyNum(fund, currenyCode) {
      const text = fund || fund === 0 ? `${currenyCode} ${formatMoneyAmount(fund)}` : ''
      return text
    },
    initCheckInfo() {
      const { writeOffRecordRespDTOS } = this.data
      this.checkInfo = writeOffRecordRespDTOS || []
    },
    getPaymentStageText(status) {
      const item = this.payment_stage.find(it => +it.value === +status) || {}
      return item.label
    }
  }
}
</script>

<style scoped>

</style>
